/*
            body {
            background-color: #999;
        }*/

    img {
        max-width: 100%;
        display: block;
    }

    /*** CSS partagé par défaut ****/
    figure.figurefx {
        /*
          width: 600px;*/
        margin: 30px auto;
        padding: 0;
        display: block;
        position: relative;
        overflow: hidden;
        /* masquer les éléments débordants par défaut */
    }

    figure.figurefx figcaption {
        position: absolute;
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        font-size: 1.3vmin;
        /* rajouts */
        background: red;
        padding: 8px;
        z-index: 100;
        width: 100%;
        max-height: 100%;
        overflow: hidden;
        top: 50%;
        left: 0;
        -moz-transform: translate3d(-100%, -50%, 0);
        /* positionner la légende en dehors de la mise en page horizontalement et centrée verticalement */
        -webkit-transform: translate3d(-100%, -50%, 0);
        transform: translate3d(-100%, -50%, 0);
        opacity: 0;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    figure.figurefx figcaption a {
        text-decoration: none;
    }

    /*** Effet push-up ****/
    figure.pushup img {
        -moz-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    figure.pushup figcaption {
        color: white;
        top: 100%;
        opacity: 1;
        -moz-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }


    figure.pushup:hover img {
        -moz-transform: translate3d(0, -20px, 0);
        /* déplacer légèrement l'image vers le haut pour un effet de parallaxe*/
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
        opacity: .5;

    }

    figure.pushup:hover figcaption {
        -moz-transform: translate3d(0, -100%, 0);
        /* déplacer la légende vers le haut pour révéler complètement la légende */
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        box-shadow: 0px -2px 28px rgba(0, 0, 0, 0.3);
        /*centrage de la legende malgré le zoom */
        margin-left: 9%;
        max-width: 80%;

    }